<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Image Click Captcha</title>
</head>

<body>
    <img id="captchaImage" src="" alt="Captcha Image">
    <div id="targetImages">
    </div>
    <button onclick="verifyCaptcha()" style="background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer;">验证</button>
    <script>
        let captchaImage = document.getElementById('captchaImage');
        let captchaId = "";
        let userClickPoints = [];
        let html = "请依次点击如下图片";

        // 请求验证码图片
        fetch('http://127.0.0.1:8080/captcha/image')
           .then(response => response.json())
           .then(response => {
                captchaImage.src = response.data.base64Image;
                captchaId = response.data.captchaId;
               for (let i = 0; i < response.data.targetImages.length; i++) {
                   html+='<img src="'+response.data.targetImages[i]+'">'
               }
               document.getElementById("targetImages").innerHTML=html;
            });

        captchaImage.onclick = function (e) {
            const rect = captchaImage.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            userClickPoints.push({ x: x, y: y });
        };

        function verifyCaptcha() {
            fetch('http://127.0.0.1:8080/captcha/verify/image-click', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    captchaId: captchaId,
                    userClickPoints: userClickPoints
                })
            })
           .then(response => response.json())
           .then(result => {
                if (result) {
                    alert('验证成功');
                } else {
                    alert('验证失败');
                }
               userClickPoints = [];
            });
        }
    </script>
</body>

</html>